<script>
import JiFeng from '@/components/JiFeng.vue'
export default {
  name: 'TestView',
  data () {
    return {
      classList: ['c1', 'c2'],
      classObj: {
        c1: false,
        c2: true
      },
      styleObj: {
        color: 'red',
        fontSize: '30px'
      }
    }
  },
  components: {
    JiFeng
  }
}
</script>

<template>
<div>
  <p class="c1 c2">hello world</p>
  <p :class="['c1','c2']">hello world</p>
  <p :class="classList">hello world</p>
  <p :class="classObj">hello world</p>
  <button @click="classObj.c2 = !classObj.c2">点我试试</button>
  <p style="color:red">你好世界</p>
  <p :style="{color:'red'}">你好世界</p>
  <p :style="styleObj">你好世界</p>
  <hr>
  <ji-feng msg="哈哈哈哈"/>
<!-- 没有插槽时，不支持在自定义组件内部继续写标签 -->
  <ji-feng msg="asdjkhjk"/>
  <ji-feng msg="插槽测试">
    <ul>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
    </ul>
<!--内容出现的位置和组件内插槽位置相关，不与使用时写的位置关联-->
    <template slot="top">
      <ol>
        <li>1</li>
        <li>12</li>
        <li>123</li>
      </ol>
    </template>
  </ji-feng>
</div>
</template>

<style scoped lang="scss">
  .c1{
    color: red;
  }
  .c2{
    font-size: 40px;
  }
</style>
